﻿<template>

  <div>


    <el-dialog title="指标信息" :visible.sync="inputFieldDlgVisible" :close-on-click-modal="false">
      <el-form :model="inputField">
        <el-form-item label="指标名称" :label-width="formLabelWidth">
          <el-input v-model="inputField.name" autocomplete="off" placeholder="请输入指标展示名称"
                    :disabled="editInputFieldMode"></el-input>
        </el-form-item>
        <!--        <el-form-item label="指标分类" :label-width="formLabelWidth">-->
        <!--          <el-select v-model="inputField.type" placeholder="请选择" :disabled="editInputFieldMode">-->
        <!--            <el-option-->
        <!--              v-for="item in fieldTypeList"-->
        <!--              :key="item.id"-->
        <!--              :label="item.name"-->
        <!--              :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="数据类型" :label-width="formLabelWidth">
          <el-select v-model="inputField.dataType"
                     :disabled="editInputFieldMode"
                     placeholder="请选择">
            <el-option
              v-for="item in dataTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据单位" :label-width="formLabelWidth">
          <el-select v-model="inputField.unit"
                     :disabled="editInputFieldMode"
                     placeholder=" ">
            <el-option
              v-for="item in unitTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="默认值" :label-width="formLabelWidth">-->
<!--          <el-input v-model="inputField.defaultValue" autocomplete="off" placeholder="请输入默认值"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="是否必填" :label-width="formLabelWidth">
          <el-radio v-model="inputField.required" :label="true">是</el-radio>
          <el-radio v-model="inputField.required" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="作用域" :label-width="formLabelWidth">
          <el-input v-model="inputField.scope" :disabled="editInputFieldMode" autocomplete="off" placeholder="请输入字段作用域"></el-input>
        </el-form-item>
        <el-form-item label="校验规则" :label-width="formLabelWidth">
          <el-input v-model="inputField.regex" autocomplete="off" placeholder="请输入校验正则表达式"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-radio v-model="inputField.show" :label="true">是</el-radio>
          <el-radio v-model="inputField.show" :label="false">否</el-radio>

        </el-form-item>


        <!--        </el-form-item>-->
        <!--        <template v-if="editInputFieldMode==false">-->
        <!--          <el-form-item label="计算单元标识" :label-width="formLabelWidth">-->
        <!--            <el-input v-model="inputField.computeUnit.ref" placeholder="请输入标识，用于公式计算引用" autocomplete="off">-->
        <!--              <el-button slot="append" @click="generateUnitRef">生成</el-button>-->
        <!--            </el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="标签"-->
        <!--                        :label-width="formLabelWidth">-->
        <!--            <el-select-->
        <!--              v-model="inputField.computeUnit.tag"-->
        <!--              filterable-->
        <!--              allow-create-->
        <!--              default-first-option-->
        <!--              placeholder="请选择或输入标签">-->
        <!--              <el-option-->
        <!--                v-for="item in computeUnitTagList"-->
        <!--                :key="item.id"-->
        <!--                :label="item.name"-->
        <!--                :value="item.id">-->
        <!--              </el-option>-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </template>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="inputFieldDlgVisible = false">取 消</el-button>
        <el-button type="primary" v-if="editInputFieldMode" @click="updateInputField">更 新</el-button>
        <el-button type="primary" v-else @click="createInputField">创 建</el-button>
      </div>
    </el-dialog>

    <el-tabs v-model="currentFieldType"   :style="{height:pageHeight-10+'px'}" tab-position="left" @tab-click="(param)=>{changeTab(param.name)}">
      <el-tab-pane v-for="type in fieldTypeList" :label="type.name" :name="type.id">
        <el-table id="fieldlist" :max-height="pageHeight-35" :data="fieldList" border highlight-current-row
                  empty-text="暂无数据" v-loading="isFieldLoading" row-key="id" :header-cell-style="{background:'#f5f7fa'}">

          <el-table-column type="index" label="序号" show-overflow-tooltip width="50" align="center"></el-table-column>
          <el-table-column prop="name" label="指标名称" header-align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="dataType" label="指标类型" :formatter="dataTypeShowFormatter"
                           align="center">
          </el-table-column>
          <el-table-column prop="unit" label="数据单位" :formatter="unitTypeShowFormatter"
                           align="center">
          </el-table-column>
          <el-table-column prop="dataType" label="是否展示" width="100"
                           align="center">
            <template slot-scope="scope">
              {{scope.row.show?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column prop="dataType" label="是否必填"  width="100"
                           align="center">
            <template slot-scope="scope">
              {{scope.row.required?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column prop="scope" label="作用域"  width="100"
                           align="center">
          </el-table-column>
<!--          <el-table-column prop="defaultValue" label="默认值" width="80"-->
<!--                           header-align="center">-->
<!--          </el-table-column>-->
          <!--        <el-table-column prop="unit" label="指标单位" width="100" :formatter="unitTypeShowFormatter" header-align="center">-->
          <!--        </el-table-column>-->
          <el-table-column prop="createDate" label="创建日期" width="170" header-align="center">
          </el-table-column>
          <el-table-column
            align="right" width="100"
            label="操作">
            <template v-if="checkPermission('field:create')" slot="header" slot-scope="scope">
              <el-button

                type="primary"
                size="small"
                @click="openCreateFieldDlg">添加
              </el-button>

            </template>
            <template slot-scope="scope">

              <el-button
                v-if="scope.row.changeable&&checkPermission('field:update')"
                size="mini"
                @click="openEditFieldDlg(scope.row)">编辑
              </el-button>
<!--              <el-button-->
<!--                v-if="scope.row.changeable&&checkPermission('field:delete')"-->
<!--                size="mini"-->
<!--                type="danger"-->
<!--                @click="deleteInputField(scope.row.id)">删除-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
    export default {
        name: "FieldList",
        props: {
            pageHeight: {type: Number, default: 500}
        },
        data() {
            return {
                queryCondition: {},
                currentModel: {state: 0},
                isFieldLoading: false,
                formLabelWidth: '120px',
                fieldList: [],
                inputFieldDlgVisible: false,
                fieldTypeList: [],
                editInputTable: {single: false},
                inputField: {required:false,show:true, dataType: 'number',},
                currentFieldType: '',
                unitTypeList: [],
                unitTypeMap: {},
                inputTableDlgVisible: false,
                dataTypeList: [],
                dataTypeMap: [],
                typeMap: {},
                editInputFieldMode: false,
                editTableMode: false,
            }
        },
        computed: {},
        mounted: function () {
            const type = this.$route.query.type;
            if(type) {
                this.currentFieldType = type;
            }
            this.loadFieldTypeList();
            this.loadDataType();
            this.loadUnitType();
            this.changeTab(type);
        },
        methods: {
            changeTab(type) {
                if(!type) {
                    return;
                }
                this.loadInputFieldList(type);
            },
            dataTypeShowFormatter: function (row, column, cellValue, index) {
                return this.dataTypeMap[cellValue];
            },
            typeShowFormatter: function (row, column, cellValue, index) {
                return this.typeMap[cellValue];
            },
            unitTypeShowFormatter: function (row, column, cellValue, index) {
                return this.unitTypeMap[cellValue];
            },
            loadUnitType: function () {
                this.$get("/meta/type/unit-type", {}, (data) => {
                    this.unitTypeList = data.data;
                    var map = {};
                    for (var i = 0; i < this.unitTypeList.length; i++) {
                        map[this.unitTypeList[i].id] = this.unitTypeList[i].name;
                    }
                    this.unitTypeMap = map;
                });
            },
            loadInputFieldList: function (type) {
                this.isFieldLoading = true;
                this.currentFieldType = type;
                this.$get("/field/data?type=" + type, {}, (data) => {
                    this.fieldList = data.data;
                    history.pushState(null,null,this.$ctx+'/#'+this.$route.path+'?type='+this.currentFieldType)

                }, () => {
                    this.isFieldLoading = false;
                });
            },

            deleteInputField: function (id) {
                this.$post("/field/delete?id=" + id, {}, (data) => {
                    this.loadInputFieldList(this.currentFieldType);
                });
            },
            loadDataType: function () {
                this.$get("/meta/type/data-type", {}, (data) => {
                    this.dataTypeList = data.data;
                    var map = {};
                    for (var i = 0; i < this.dataTypeList.length; i++) {
                        map[this.dataTypeList[i].id] = this.dataTypeList[i].name;
                    }
                    this.dataTypeMap = map;
                });
            },
            loadFieldTypeList: function () {
                this.$get("/field/type", {}, (data) => {
                    this.fieldTypeList = data.data;
                    var map = {};
                    var validCurrentType = false;
                    for (var i = 0; i < this.fieldTypeList.length; i++) {
                        map[this.fieldTypeList[i].id] = this.fieldTypeList[i].name;
                        if(this.currentFieldType&&this.currentFieldType==this.fieldTypeList[i].id){
                            validCurrentType = true;
                        }
                    }
                    this.typeMap = map;
                    if(!validCurrentType) {
                        this.currentFieldType = this.fieldTypeList[0].id;
                        this.loadInputFieldList(this.currentFieldType);
                    }
                });


            },
            createInputField: function () {
                var errorMsg = '';
                if (!this.inputField.name || this.inputField.name == '') {
                    //单元名称为空，提示输入单元名称
                    errorMsg = '请先输入指标名称';
                }
                if (errorMsg.length > 0) {
                    this.$message({
                        message: errorMsg,
                        type: 'warning'
                    });
                    return;
                }
                this.inputField.type = this.currentFieldType;
                this.$post("/field/create", this.inputField, (data) => {

                    this.$message({
                        message: '创建字段成功',
                        type: 'success'
                    });
                    this.inputFieldDlgVisible = false;
                    this.loadInputFieldList(this.currentFieldType);

                });
            },
            updateInputField: function () {
                this.inputField.type = this.currentFieldType;
                this.$post("/field/update", this.inputField, (data) => {
                    this.$message({
                        message: '更新字段成功',
                        type: 'success'
                    });
                    this.inputFieldDlgVisible = false;
                    this.loadInputFieldList(this.currentFieldType);
                });
            },

            openCreateFieldDlg: function () {
                if (this.editInputFieldMode) {
                    this.editInputFieldMode = false;
                    this.inputField = {required:false,show:true, dataType: 'number',};
                }
                this.inputFieldDlgVisible = true;

            },
            openCreateTableDlg: function () {
                if (this.editTableMode) {
                    this.editTableMode = false;
                    this.editInputTable = {single: false};
                }
                this.inputTableDlgVisible = true;

            },
            openEditFieldDlg: function (data) {
                this.inputField = JSON.parse(JSON.stringify(data));
                this.editInputFieldMode = true;
                this.inputFieldDlgVisible = true;

            },


        },

    }
</script>
